<%@page import="com.xe.util.XECodemirrorConfig"%>
<%@page import="com.xe.gae.control.XEResourcesManager"%>
<%@page import="com.xe.util.XString"%>

<%@page import="com.xe.gae.model.XEResource"%>
<%@page import="com.xe.gae.control.XEDataStorageService"%>
	<%	String ek=request.getParameter("resource-key") ;
		XEDataStorageService dss = new XEDataStorageService();
		XEResource r = (XEResource) dss.findByEncodeKey(XEResource.class, ek);

		XString xs = new XString();
		
		XEResourcesManager rm= new XEResourcesManager();
	
		XECodemirrorConfig edt=new XECodemirrorConfig();	
	%>
	
	
<html>
  <head>
    <meta charset="utf-8">
    <title><%=r.getPath()%></title>
    <link rel="stylesheet" href="/_xe/codemirror/lib/codemirror.css">
    <script src="/_xe/jquery-1.9.1.min.js"></script>
    <script src="/_xe/codemirror/lib/codemirror.js"></script>
    <script src="/_xe/codemirror/addon/edit/matchbrackets.js"></script>
    
    <script src="/_xe/codemirror/mode/xml/xml.js"></script>
    <script src="/_xe/codemirror/mode/javascript/javascript.js"></script>
    <script src="/_xe/codemirror/mode/css/css.js"></script>
    
    <script src="<%=rm.getEditor(r)%>"></script>
    <link rel="stylesheet" href="/_xe/codemirror/doc/docs.css">
    <style>
        .CodeMirror {
        border: 0px solid #eee;
        height: auto;
      }
      .CodeMirror-scroll {
        overflow-y: hidden;
        overflow-x: auto;
      }
      .CodeMirror-activeline-background {background: #e8f2ff !important;}
      
	   .top{float:top; width:100%; position:fixed}
      
      </style>
      <script type="text/javascript">
      
	      var workIsDone = true;
	
	      window.onbeforeunload = confirmBrowseAway;
	
	      function confirmBrowseAway()
	      {
	        if (workIsDone) {
	          return "Are you sure you want to do that? If you leave this page " +
	          "now, your work will NOT be saved!";
	        }
	      }
	
      
      
      	 function doSave(){	
      		editor.save();
    		$.post("/_xe/admin", $("#editform").serialize());
      	 }
      	 
      	 

      	 
      	 
      </script>
  </head>
  <body>
  <table>
  <tr  height="100%" valign="top">
  <td width="100%" align="left">
	  <a target="<%=r.getPath()%>" href=<%=r.getPath()%>><%=r.getPath()%></a> 
		 
	
	    <form id="editform" name="editform" >
  		
	    <table >
	    <tr>
	    <td>
	        <input type="button" value="save" onclick="doSave();">
	        <input type="button" value="revert" onclick="location.reload(true);">
	        <input type="hidden" name="action" id="action" value="save"/>
	        <input type="hidden" name="resource-key" id="resource-key" value="<%=request.getParameter("resource-key")%>"/>
	    </td>
	    </tr>
	    </table>

	    <textarea id="code" name="code"><%=xs.escapeHtml(r.getSource().getValue())%></textarea>
	    </form>
	    <script>
	      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	    	  mode: "<%=rm.getEditorMime(r)%>", 
	    	  tabMode: "indent",
	    	  lineNumbers: true,
	    	  styleActiveLine: true,
	    	  lineWrapping: true  
	      });
	    </script>
    </td>
 </tr>
</table>
  </body>
</html>
